<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>Title</title>

    <style type="text/css">
        .main {
            position: absolute;
            top: 0px;
            left: 0px;
            right: 0px;
            bottom: 0px;
        }
        .main .left{
            width: 30%;
            height: 100%;
            float: left;
        }
        .main .left .free{
            width: 100%;
            height: 100%;
        }
        .main .rigth{
            width: 70%;
            height: 100%;
            float: right;
        }
        .main .rigth .vip{
            width: 60%;
            height: 100%;
            float: left;
        }
        .main .rigth .company{
            width: 40%;
            height: 100%;
            float: right;
        }
    </style>
</head>
<body>
    <script type="text/javascript" src="echarts.js"></script>
    <script type="text/javascript" src="jquery-1.9.1.js"></script>

    <div class="main">
        <div class="left">
            <div class="free" id="free"></div>
        </div>
        <div class="rigth">
            <div class="vip" id="vip"></div>
            <div class="company" id="company"></div>
        </div>
    </div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var vipChart = echarts.init(document.getElementById('vip'));
        var freeChart = echarts.init(document.getElementById('free'));
        var companyChart = echarts.init(document.getElementById('company'));
        // 指定图表的配置项和数据
        var vipOption = {
            title: {
                text: 'VIP课程实时点击量',
                subtext: '纯属虚构',
                x: 'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                type: 'scroll',
                orient: 'vertical',
                right: 10,
                top: 20,
                bottom: 20,
                data: [],
                selected: {}
            },
            series: [
                {
                    name: '姓名',
                    type: 'pie',
                    radius: '60%',
                    center: ['50%', '60%'],
                    data: [],
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
        //company图表
        var companyOption = {
            title: {
                text: '企业课程实时点击量',
                subtext: '纯属虚构',
                x: 'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                type: 'scroll',
                orient: 'vertical',
                right: 10,
                top: 20,
                bottom: 20,
                data: [],
                selected: {}
            },
            series: [
                {
                    name: '姓名',
                    type: 'pie',
                    radius: '60%',
                    center: ['50%', '60%'],
                    data: [],
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
        //免费课程
        var freeOption = {
            title: {
                text: '免费课程实时点击量',
                subtext: '纯属虚构',
                x: 'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                type: 'scroll',
                orient: 'vertical',
                right: 10,
                top: 20,
                bottom: 20,
                data: [],
                selected: {}
            },
            series: [
                {
                    name: '姓名',
                    type: 'pie',
                    radius: '60%',
                    center: ['50%', '60%'],
                    data: [],
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };

        function getdata() {

            $.ajax(
                {
                    url: "/getdata",
                    dataType: "json"
                }
            ).done(function (ret) {
                //vip课程
                var legendData = [];
                var selected = {};
                vipData=ret[2]
                companyData = ret[0]
                freeData = ret[1]
                for(j in vipData){
                    legendData.push(vipData[j].name);
                    selected[vipData[j].name] = true;
                }
                vipOption.series[0].data = vipData;
                vipOption.legend.data = legendData
                vipOption.legend.selected = selected
                vipChart.setOption(vipOption);
                //免费课程
                var legendData = [];
                var selected = {};
                for(j in freeData){
                    legendData.push(freeData[j].name);
                    selected[freeData[j].name] = true;
                }
                freeOption.series[0].data = freeData;
                freeOption.legend.data = legendData
                freeOption.legend.selected = selected
                freeChart.setOption(freeOption);
                //企业课程
                var legendData = [];
                var selected = {};
                for(j in companyData){
                    legendData.push(companyData[j].name);
                    selected[companyData[j].name] = true;
                }
                companyOption.series[0].data = companyData;
                companyOption.legend.data = legendData
                companyOption.legend.selected = selected
                companyChart.setOption(companyOption);
            });
        }
        window.setInterval(function () {
            getdata()
        }, 1000)
    </script>


</body>
</html>